body {
  display: flex;
  place-content: center;
  place-items: center;
  flex-direction: column;
}
body .table-container {
  margin-bottom: 20px;
}
body .table-container:hover {
  transition: 250ms;
  box-shadow: 0 0 3px 2px #f5f5f5;
}
body table {
  width: 50vw;
  min-width: 600px;
  /* 每个th */
}
body table .text-center {
  border: 1px solid #ebebeb;
  transition: 250ms;
}
body th {
  position: relative;
  background-color: #f0f2f5;
  pointer-events: none;
  font-weight: 500;
  color: #909399;
}
body th:nth-child(1) {
  border-top-left-radius: 5px;
  width: 56px;
}
body th:last-child {
  border-top-right-radius: 5px;
}
body th::after {
  content: 'x';
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: solid 2px #fff;
  background: #409eff;
  line-height: 18px;
  text-align: center;
  color: #fff;
  transform: scale(0.5, 0.5);
  position: absolute;
  right: -10px;
  top: -10px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1000;
}
body th::after:hover {
  width: 40px;
  height: 40px;
  background-color: #e8e8e8;
}
body th:last-child::after {
  display: none;
}
body tr {
  transition: 250ms;
  height: 50px;
}
body tr td {
  text-align: center;
  color: #606266;
}
body tr:hover {
  transition: 250ms;
  background: #f5f7fa;
}
body .btnContainer {
  margin-top: 20px;
  min-width: 600px;
  text-align: right;
  padding-right: 15px;
}
body button {
  border: 1px solid #f4f4f5;
  background-color: #f4f4f5;
  color: #606266;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: 700;
  outline: none;
  margin-right: 10px;
}
body button:hover {
  transition: 250ms;
  color: #409eff;
}
body button .selected {
  background-color: #409eff;
  color: #fff;
}
